<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动场景1：图片与文字环绕</title>
		<style>
			img{
				/* 图片脱离文档流--文字包含在图片周边 */
				float: left;
				margin-right: 50px; /*图片与文字连接处间隙*/
				margin-bottom: 50px; /*图片与文字连接处间隙*/
			}
			p{
				font-size: 16px;/*页面默认字体尺寸*/
				line-height: 20px;/*浮动文字，行高无法设定*/
				word-spacing: 20px;
			}
		</style>
	</head>
	<body>
		<h1>浮动之图片文字环绕</h1>
		<img src="img/1.gif" alt="大呲花" width="250px" height="250px"/>
		<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Optio, ipsum. Placeat nisi minima fugiat tempore voluptate eligendi voluptatem quam voluptates, quae facere, ipsa dolor? Debitis nam aut labore sapiente. Ipsam. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deleniti rerum cupiditate cum veniam blanditiis ipsum! Unde vero dolorum voluptatibus ratione rerum, numquam placeat ex at magnam inventore officiis, pariatur autem? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Soluta, ipsa. Dolorem mollitia doloremque rem exercitationem quia impedit rerum alias harum perferendis. Reiciendis id placeat minima quia cupiditate. Cumque, labore adipisci? </p>
	</body>
</html>